<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="toDetails">
				</image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.tranAcc}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask">
				</image>
			</view>
		</view>
		<view class="b-mox-certer">
			<view class="rerc-text">
				<view class="rc-title">
					{{$data.$language.trlimit}}
				</view>
				<view class="rc-input">
					<view class="">
						USDT
					</view>
					<input type="number" :placeholder="$data.$language.Pleaseenter" v-model="munboxinput">
				</view>
				<view class="keyongs">
					{{$data.$language.Currently}}{{hdrawal.usdt}}USDT，<span @click="wholeBtn">{{$data.$language.Transferall}}</span>
				</view>
				<view class="keyongs">
					<!-- 提示：提现即销毁价值5%USDT的WONE币 -->
					{{$data.$language.montixiansunL}}
				</view>
			</view>
		</view>
		<view class="btn" @click="nuberBtn">
			{{$data.$language.tranAcc}}
		</view>
		<view class="monbtncer" v-if="bntshuminbtn">
			
		</view>
		<view class="monboxndmrj" v-if="bntshuminbtn">
			<view class="viewtitle">
				{{$data.$language.Passwordinput}}
			</view>
			<input type="password" :placeholder="$data.$language.Passwordinput" v-model="password" :maxlength='6'>
			<view class="btnmaninds">
				<view class="aatione" @click="cancellationbtn()">
					{{$data.$language.cancellation}}
				</view>
				<view class="" @click="quBtns">
					{{$data.$language.qbtn}}
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 50rpx;">
			
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	import {
		withdrawalGet,
		withdrawalPost
	} from '@/api/index.js';
	export default {
		data() {
			return {
				// $language: uni.getStorageSync('locale') == 'en-US' ? enUS : zhCN,
				isDrawerOpen: false,
				isOpenMask: false,
				hdrawal:{},
				munboxinput:'',
				bntshuminbtn:false,
				password:'',

			}
		},
		onReachBottom() {  
		},
		onLoad() {
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.maxData()
		},
		methods: {
			cancellationbtn(){
				this.bntshuminbtn = false
			},
			// 全部提现
			wholeBtn(){
				this.munboxinput = this.hdrawal.usdt
			},
			quBtns(){
				var awalsucce = this.$data.$language.awalsucce
				this.bntshuminbtn = false
				withdrawalPost({
						usdt: this.munboxinput,
					password:this.password,
					},
					(data) => {
						// 处理成功返回的数据
						// console.log(data,'123456')
						uni.showToast({
							title:awalsucce,
							icon:"none",
							duration:2000
						})
						this.maxData()
						this.munboxinput = ''
						
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						var mimacuowu = this.$data.$language.mimacuowu
						uni.showToast({
							title:mimacuowu,
							icon:"none",
							duration:2000
						})
						console.error(errorMsg);
					}
				);
			},
			//提现按钮
			nuberBtn(){
				var awalsucce1 = this.$data.$language.awalsucce1 + this.hdrawal.usdt
				if(parseFloat(this.munboxinput)>parseFloat(this.hdrawal.usdt)){
					uni.showToast({
						title:awalsucce1,
						icon:"none",
						duration:2000
					})
				}else if(this.munboxinput==''){
					uni.showToast({
						title:this.$data.$language.Pleaseenter,
						icon:"none",
						duration:2000
					})
				}else{
					this.bntshuminbtn = true
					// this.quBtns()
				}
				
			},
			//获取提现金额
			maxData(){
				withdrawalGet((data) => {
						// 处理成功返回的数据
						this.hdrawal = data
						console.log(data, 'this.logdata');
				
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			refreshLanguage(locale) {
				if (locale === 'zh-CN') {
					this.$language = zhCN
				} else if (locale === 'en-US') {
					this.$language = enUS
				}else{
					  this.$language = trCN
				  }
				uni.reLaunch({
					url: '/pages/tranAcc/tranAcc'
				});

			},
			toDetails() {
				uni.navigateTo({
					url: '/pages/walletAll/walletAll'
				})
				// uni.navigateBack({
				// 	delta:1
				// })
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
		},

		components: {
			drawer,
			languageMask
		}
	}
</script>

<style lang="less">
	.box {
		width: 750rpx;
		background-color: #FFFFFF !important; 
	}

	.head {
		padding: 40rpx;
	}
	.monbtncer{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0, .4);
		z-index: 999;
	}
	.monboxndmrj{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 9999;
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 14rpx;
		.viewtitle{
			width: 100%;
			font-size: 34rpx;
			height: 120rpx;
			text-align: center;
			line-height: 120rpx;
			color: #000000;
		}
		input{
			width: 80%;
			height: 80rpx;
			border: 1rpx solid #e9e9e9;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			display: block;
			margin: auto;
		}
		.btnmaninds{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 60rpx;
			view{
				width: 200rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				background: #0762FF;
				border-radius: 6px;
				color: #fff;
			}
			.aatione{
				background-color: #e9e9e9;
				color: #000000;
			}
		}
	}
	.headline {
		display: flex;
	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin: 28.85rpx 0 0 158rpx;
	}
	.b-mox-certer{
		width: 100%;
		padding: 0 24rpx;
		.rerc-text{
			width: 702rpx;
			height: 404rpx;
			background: #F4F6FA;
			border-radius: 16rpx;
			.rc-title{
				padding: 44rpx 0 0 44rpx;
				color: #000000;
				font-size: 36rpx;
				margin-bottom: 32rpx;
				box-sizing: border-box;
			}
			.rc-input{
				width: 638rpx;
				height: 116rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: auto;
				display: flex;
				padding: 0 24rpx;
					box-sizing: border-box;
				view{
					width: 172rpx;
					height: 116rpx;
					line-height: 116rpx;
					font-weight: 400;
					color: #000000;
					font-size: 32rpx;
				}
				input{
					width: 440rpx;
					height: 116rpx;
					border: none;
					text-align: right;
					color: #666666;
					font-size: 32rpx;
				}
			}
			.keyongs{
				font-size: 24rpx;
				font-weight: 400;
				color: #929292;
				line-height: 34rpx;
				padding: 0 44rpx;
				box-sizing: border-box;
				margin-top: 14rpx;
				span{
					color: #153B7E;
				}
			}
		}
	}
	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #0762FF;
		border-radius: 12rpx;
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

</style>